<template>
  <div>
    <div style="margin-bottom:.625rem;"> 
      <a-button type="primary" @click="showEmployeesModal">新增员工</a-button> 
    </div>
    <!-- 员工表格 -->
    <a-table :columns="columns" :dataSource="cashierPList" style="background:#fff;">
      <span slot="status" slot-scope="text">
        <span v-if="text===1">正常</span>
        <span v-else>暂停使用</span>
      </span>
    </a-table>
    <!-- 新增员工弹窗 -->
    <a-modal
      title="员工信息"
      v-model="isAddEmployees"
      @ok="handleOk"
      width="720px"
    >
      <!-- 员工组件 -->
      <employess-common />
      <!-- 底部按钮组 -->
      <template slot="footer">
        <div style="display:flex;justify-content:center;">
          <a-button>取消</a-button>
          <a-button type="primary">确定</a-button>
        </div>
      </template>
    </a-modal>
  </div>
</template>
<script>
import EmployessCommon from '@/components/SettingDrawer/components/EmployessCommon'

const columns = [
  {
    title: '员工ID',
    dataIndex: 'identity_code',
  },
  {
  title: '员工姓名',
  dataIndex: 'username',
  }, 
  {
    title: '所属部门',
    dataIndex: 'group_name',
  }, 
  {
    title: '账号角色',
    dataIndex: 'role_name',
  },
  {
    title: '登录手机号',
    dataIndex: 'phone',
  }, 
  {
    title: '账号状态',
    dataIndex: 'status',
    scopedSlots: { customRender: 'status' },
  },
  {
    title: '最近登录来源',
    dataIndex: 'is_admin',
  },
  {
    title: '最近登录时间',
    dataIndex: 'updated_at',
  }
];

export default {
  props: {
    cashierPList: Array
  },
  components: {
    EmployessCommon
  },
  data() {
    return {
      isAddEmployees: false,
      columns,
    }
  },
  methods: {
    // 新增员工弹窗状态
    showEmployeesModal() {
      this.isAddEmployees = true
    },
    handleOk(e) {
      window.window.console.log(e);
      this.isAddRole = false
    },
  }
}
</script>